<template>
<div class="home">
<div class="box">
    <ul>
      <li @click="dialogVisible=true" v-show="denglu==false">登录</li>
      <li v-show="denglu==true">欢迎{{dlname}}</li>
      <li>|</li>
      <li @click="zhuce">注册</li>
      <li @click="deng">我的订单</li>
      <li @click="deng">我的收藏</li>
      <li @click="$router.push('/wu')">购物车(0)</li>
      <li></li>
    </ul>
  </div>
       <!-- 主体部分 -->
       <div class="zhong">
        <ul>
          <li class="left"><img src="../assets/imgs/logo.png" alt=""></li>
          <li class="center" :class="(index==num?'zxc':'')" @click="dian(index)" v-for="(item,index) in list" :key="index">
            {{item.name}}
          </li>
          <li class="you">
            <el-input placeholder="请输入内容"  v-model="ss">
              <el-button slot="append" icon="el-icon-search" @click="sousuo(ss)"></el-button>
            </el-input>
          </li>
        </ul>--
      </div>
    <router-view></router-view>
       <!-- 底部 -->
      <footer>
        <div class="di">
          <ul>
            <li>
              <span>7天无理由退换货</span>
            </li>
            <li>
              <span>满99元全场免费</span>
            </li>
            <li>
              <span>100%品质 保证</span>
            </li>
          </ul>
        </div>
        <div class="xia">
          <p> 
            <img src="../assets/imgs/github.png" alt="">
          </p>
            <p>
            <a><router-link to="/home">首页</router-link></a> |
            <a><router-link to="/goods">全部商品</router-link></a> |
            <a><router-link to="/about">关于我们</router-link></a>
          </p>
          <p>商城版权所有@2012-2021</p>
        </div>
      </footer>
      <!-- //登录 -->
             <el-dialog title="登录" :visible.sync="dialogVisible" width="30%">
           <el-form :model="ruleForm" :rules="rule" ref="addRegister" label-width="100px" class="demo-ruleForm">
                <el-form-item  label="账号"  prop="userName" >
             <el-input v-model="ruleForm.userName" placeholder="请输入用户账号" prefix-icon="el-icon-user-solid"></el-input>
             </el-form-item>
             <el-form-item  label="密码"  prop="password">
             <el-input v-model="ruleForm.password" placeholder="请输入用户密码" prefix-icon="el-icon-view"></el-input>
             </el-form-item>
           
            <el-button type="success" @click="addlogin" class="dd">登录</el-button>
             </el-form>
          </el-form>
    </el-dialog> 
      <!-- //注册 -->
     <el-dialog title="注册" :visible.sync="outerVisible" width="30%">
           <el-form :model="Form" :rules="rules" ref="addRegister" label-width="100px" class="demo-ruleForm">
                <el-form-item  label="账号"  prop="userName" >
             <el-input v-model="Form.userName" placeholder="请输入用户账号" prefix-icon="el-icon-user-solid"></el-input>
             </el-form-item>
             <el-form-item  label="密码"  prop="password">
             <el-input v-model="Form.password" placeholder="请输入用户密码" prefix-icon="el-icon-view"></el-input>
             </el-form-item>
             <el-form-item  label="确认密码"  prop="passwordd">
             <el-input v-model="Form.passwordd" placeholder="请再次输入密码" prefix-icon="el-icon-view"></el-input>
             </el-form-item>
            <el-button type="success" @click="zc" class="dd">注册</el-button>
             </el-form>
          </el-form>
    </el-dialog> 


</div>
</template>
<script>
import { login, zhuc ,sousuo,search} from "@/api/api.js";
export default {
  name: "index",
  props: [],
  data() {
    return {
      num: 0,
      ss:'',//搜索
        denglu:false,
      dlname:'',
      dialogVisible: false, //登录显示隐藏
      outerVisible: false, //注册显示隐藏
      zxc: [],
      ruleForm: {//登录
        userName: "",
        password: ""
      },
      Form: {//注册
        userName: "",
        password: "",
        passwordd: ""
      },
    
      rule: {
        userName: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            pattern: /^[0-9a-zA-Z]{3,12}$/,
            message: "必须是数字字母3-12位的组合",
            trigger: "blur"
          }
        ]
      },
      rules: {
        userName: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            pattern: /^[0-9a-zA-Z]{3,12}$/,
            message: "必须是数字字母3-12位的组合",
            trigger: "blur"
          }
        ],
        passwordd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            pattern: /^[0-9a-zA-Z]{3,12}$/,
            message: "必须是数字字母3-12位的组合",
            trigger: "blur"
          }
        ]
      },
      list: [{ name: "首页" }, { name: "全部商品" }, { name: "关于我们" }]
    };
  },
  created() {
    //钩子函数实例创建之后
    // this.xuan()
    if(localStorage.getItem("user")){
      this.denglu=true
       let user = JSON.parse(localStorage.getItem("user"));
       this.dlname=user.userName
    }else{
      this.denglu=false
    }
  },
  methods: {
    //方法
    sousuo(e){//搜索
     this.$router.push({path:'/goods',query:{search:e}})
      console.log(e);
   
    },
    dian(e) {
      console.log(e);
      this.num = e;
      if (e == 0) {
        this.$router.push("/");
      } else if (e == 1) {
        this.$router.push("/goods");
      } else {
        this.$router.push("/about");
      }
    },

  

    // 注册
    zc() {
      zhuc(this.Form).then(res => {
        console.log(res);
        if (res.status == 200) {
          this.$message({
            message: res.data.msg,
            type: "success",
          });
        }
            this.outerVisible=false
      });
    },
    //登录
    addlogin() {
       login({userName:this.ruleForm.userName, password: this.ruleForm.password}).then(res=>{
          console.log('登录成功数据',res);
          localStorage.setItem('user',JSON.stringify(res.data.user))
            //每次需要获取登录的，获取下才能拿数据
            let user=JSON.parse(localStorage.getItem('user'))
              // console.log(user);  
              this.dlname=user.userName
               this.denglu=true
       }) 
       this.dialogVisible=false
    },

    closeLogin() {
      this.ruleForm = {
        userName: "",
        password: ""
      };
    },

    deng() {
      //登录
      this.dialogVisible = true;
    }, //注册
    zhuce() {
      this.outerVisible = true;
    }
  },
  components: {
    //注册子组件
  },
  watch: {
    //监听
  }
};
</script>
<style lang="scss" scoped>
.dd {
  width: 400px;
  height: 50px;
  // line-height: 30px;
  background-color: blue;
  margin-left: 50px;
  margin-top: 20px;
}
.home {
  width: 100%;
  height: 100%;
  .box {
    width: 100%;
    height: 50px;
    // position: relative;
    background-color: gray;
    ul {
      display: flex;
      // position: absolute;
      // right:50px;
      margin-left: 900px;
      li {
        color: #fff;
        list-style: none;
        font-size: 20px;
        line-height: 45px;
        padding: 0 15px;
      }
    }
  }
}
.zhong {
  margin-bottom: 20px;
  width: 1200px;
  max-width: 1200px;
  margin: 0 auto;
  height: 80px;
  ul {
    border-bottom: 1px solid #ccc;
    margin: 0 auto;
    width: 90%;
    height: 80px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    position: relative;
    .left {
      width: 200px;
      margin-right: 100px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .center {
      width: 100px;
      height: 80px;
      text-align: center;
      line-height: 80px;
      box-sizing: border-box;
      text-align: center;
      margin-left: 20px;
      cursor: pointer;
      color: gray;
      &:hover {
        color: black;
      }
    }
    .zxc {
      color: blue;
      border-bottom: 2px solid blue;
    }
    .you {
      position: absolute;
      right: 0;
      width: 300px;
    }
  }
}
footer {
  width: 100%;
  height: 300px;
  box-sizing: border-box;
  background-color: rgb(71, 70, 70);
  .xia {
    width: 100%;
    height: 200px;
    text-align: center;
    p {
      color: gray;
      margin-top: 10px;
      a {
        color: gray;
        text-decoration: none;
      }
    }
  }
  .di {
    height: 150px;
    ul {
      display: flex;
      align-items: center;
      color: white;
      justify-content: space-around;
      font-size: 20px;
      li {
        span {
          display: inline-block;
          margin-top: 50px;
        }
      }
    }
  }
}
</style>